import React,{Component} from 'react';
import * as RecordAPI from '../utils/RecordAPI'

export default class RecordForm extends Component{
    constructor(props){
        super(props);
        this.state={
            date: '',
            title: '',
            amount: '',
        }
    }

    valid(){
        return this.state.date && this.state.title && this.state.amount;
    }

    handleChange(e){
       let name,obj;
       name=e.target.name;
        this.setState((
            obj={},
            obj[name]=e.target.value,
            obj
        ))       
    }

    handleSubmit(e){
        e.preventDefault()
        const data={
            date:this.state.date,
            title:this.state.title,
            amount: parseInt(this.state.amount)
        }
        RecordAPI.create(data)
        .then(res=>{
            this.props.handleNewRecord(res.data)
            this.setState({
                date: '',
                title: '',
                amount: '',
            })
        })
        .catch(error=>console.log(error))
    }

    

    render(){
        return (
            <form className='form-inline mb-3' onSubmit={this.handleSubmit.bind(this)}>
                <div className='form-group mr-2'>
                    <input className='form-control' onChange={this.handleChange.bind(this)} placeholder='Date' name='date' value={this.state.date}/>
                </div>
                <div className='form-group mr-2'>
                    <input className='form-control' onChange={this.handleChange.bind(this)} placeholder='Title' name='title' value={this.state.title}/>
                </div>
                <div className='form-group mr-2'>
                    <input className='form-control' onChange={this.handleChange.bind(this)} placeholder='Amount' name='amount' value={this.state.amount}/>
                </div>
                <button type='submit' className='btn btn-primary' disabled={!this.valid()}>Create Record</button>
            </form>
        )
    }
 }